<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主题更换管理</title>
    <link rel="shortcut icon" href="/images/index/logo.ico">
    <style>
        .refresh, .search {
            display: inline-block;
            float: right;
        }

        .search {
            margin-right: 40%;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="refresh">
    <button class="btn btn-info refresh" title="刷新" data-url="/themeAdmin/user/list"><span
            class="glyphicon glyphicon-refresh"></span></button>
</div>
<div class="search">
    <form class="form-inline">
        <div class="form-group">
            <div class="input-group">
                <select name="" id="type" class="form-control">

                    <%--<option value="id">精选案例</option>--%>
                    <%--<option value="影视推广">影视推广</option>--%>
                    <%--<option value="游戏推广">游戏推广</option>--%>
                    <%--<option value="企业定制">企业定制</option>--%>
                    <%--<option value="品牌推广">品牌推广</option>--%>
                    <%--<option value="为极制作">为极制作</option>--%>
                </select>
                <div class="input-group-addon"><span class="glyphicon glyphicon-glass"></span> 分类选择</div>
            </div>
        </div>
    </form>
</div>
<div class="">
    <ol class="breadcrumb">
        <li><a href="javascript:;">主题案例管理</a></li>
        <li class="active">主题上传</li>
    </ol>
</div>

<div class="banner_show">
    <table class="table table-bordered table-responsive">
        <tr>
            <th>id</th>
            <th>主题分类</th>
            <th>主题展示图</th>
            <th>主题标题</th>
            <th>主题介绍</th>
            <th>主题详情图Banner</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <c:forEach var="data" items="${dataMap}">
            <tr>
                <td class="id">${data.id}</td>
                <td><span>${data.cid}</span></td>
                <td class="s_banner"><img src="/themeAdmin/user/image?tid=${data.id}&image=${data.image}" alt=""
                                          width="250px"
                                          height="150px">
                    <input type="file" class="hidden" accept="image/png,image/gif,image/jpg">
                </td>
                <td><p>${data.title}</p></td>
                <td><p>${data.content}</p></td>
                <td class="s_banner"><img src="/themeAdmin/user/image?tid=${data.id}&image=${data.bimage}" alt=""
                                          width="250px"
                                          height="100px">
                    <input type="file" class="hidden" accept="image/png,image/gif,image/jpg">
                </td>
                <td class="status" data-status="${data.status}">
                    <c:choose>
                        <c:when test="${data.status==0}">未上传</c:when>
                        <c:when test="${data.status==1}">审核中</c:when>
                        <c:when test="${data.status==2}">使用中</c:when>
                        <c:when test="${data.status==-1}">审核未通过</c:when>
                        <c:when test="${data.status==-2}">主题已下线</c:when>
                        <c:otherwise>未知错误</c:otherwise>
                    </c:choose>
                </td>
                <td class="operate ">
                    <c:if test="${data.status==0 || data.status==-1 ||data.status==-2}">
                        <button class=" btn btn-info banner_active">提交审核</button>
                        <button class=" btn btn-primary edit" data-url="/themeScreenshot/user/list?tid=${data.id}">编辑截图
                        </button>
                        <button class=" btn btn-danger delete">删除</button>
                    </c:if>
                    <a href="/themeExamine/admin/looktheme?tid=${data.id}" target="_blank">
                        <button class=" btn btn-active lookfor">浏览</button>
                    </a>

                </td>
            </tr>
        </c:forEach>

    </table>
</div>
<button class="btn btn-info add" data-url="/themeAdmin/user/addTheme">
    <span class="glyphicon glyphicon-plus"></span> 添加
</button>

<script>
    $(document).ready(function () {
        $('.refresh').click(function () {
            var scope = $(this);
            $('.content_right').load(scope.attr('data-url'));
            toast_text('刷新成功', 600);
        });
//        operate_btn();

        $('.edit').click(function () {
            $('.content_right').load($(this).attr('data-url'));
        });
        $('.add').click(function () {
            $('.content_right').load($(this).attr('data-url'));
        });
//        img_click(2, 590, 400);
//        img_click(5);
//删除主题
        $('.delete').click(function () {
            var scope = $(this);
            var id = $(this).parent().siblings('.id').text();
            custom_modal('你确定要删除么？');
            $('.modal_footer button').eq(0).unbind().click(function () {
                $.post("/themeAdmin/user/delete", {id: id}, function (data) {
                    if (data.code == 200) {
                        scope.parents('tr').remove();
                    }
                    $('.modal_1').fadeOut();
                    toast_text(data.msg, 600);
                })
            });

        });

//        提交审核

        $('.banner_active').click(function () {
            var scope = $(this);
            var id = $(this).parent().siblings('.id').text();
            var state = $(this).parent().siblings('.status').attr('data-status');
            custom_modal('你确定要提交审核么？');
            $('.modal_footer button').eq(0).unbind().click(function () {
                $.post("/themeAdmin/user/changeTheme", {id: id, state: state}, function (data) {
                    $('.content_right').load("/themeAdmin/user/list");
                    $('.modal_1').fadeOut();
                    toast_text(data.msg, 600);
                })
            });

        });


        //分类模糊查询表格中的内容
        $("#type").change(function () {
            if ($.trim($('#type option:selected').text()) == '全部') {
                $("table tr:gt(0)").show();
            } else {
                $("table tr:gt(0)").hide();
                var $d = $("table tr:gt(0)").filter(":contains('" + $.trim($("#type option:selected").text()) + "')");
                $d.show();
            }
        });
        //请求分类
        $.get('/themeClass/admin/listClass', function (data) {
            var str = '<option value="全部">全部</option>';
            $.each(data, function (n, value) {
                str += "<option value=\"" + value.id + "\">" + value.name + "</option>"
            });
            $('#type').append(str);
        });
        //排序
        var save_id = [];
        $('.save').click(function () {
            $('.table tr').each(function (index, elem) {
                if (index > 0) {
                    save_id.push($(elem).find('td').eq(0).text());
                }
            });
            $.post("/themeAdmin/user/softTheme", {id: save_id.join(",")}, function (data) {
                if (data.code == 200) {
                    toast_text('提交成功', 3000);
                }
            });
        });


        //即时修改
        p_click();

        function p_click() {
            $('p').dblclick(function () {
                if ($(this).parent().siblings('.status').attr('data-status') == '0' || $(this).parent().siblings('.status').attr('data-status') == '-1' || $(this).parent().siblings('.status').attr('data-status') == '-2') {
                    var text = $(this).text();
                    $(this).replaceWith('<input type="text" value="' + text + '">');
                    $('input').focus();
                    $('input').unbind().blur(function () {
                        var text = $(this).val();
                        var id = $(this).parent().siblings('.id').text();
                        var type = $(this).parent().index();
                        $(this).replaceWith('<p>' + text + '</p>');
                        p_click();
                        upload_text('/themeAdmin/user/changeMassage', type, text, id);
                    });
                }
            });
        }

        span_click();

        function span_click() {
            $('span').dblclick(function () {
                if ($(this).parent().siblings('.status').attr('data-status') == '0' || $(this).parent().siblings('.status').attr('data-status') == '-1' || $(this).parent().siblings('.status').attr('data-status') == '-2') {
                    var text = $('#type').html();
                    $(this).replaceWith('<select name="" id="type" class="form-control">' + $.trim(text) + '</select>');
                    $('table select').unbind().blur(function () {
                        var text = $(this).find("option:selected").text();
                        var val = $(this).val();
                        var id = $(this).parent().siblings('.id').text();
                        var type = $(this).parent().index();
                        $(this).replaceWith('<span>' + text + '</span>');
                        span_click();
                        upload_text('/themeAdmin/user/changeMassage', type, val, id);
                    });
                }
            });
        }

        function upload_text(url, type, values, id) {
            $.post(url, {
                id: id,
                type: type,
                value: values
            }, function (data) {
                toast_text(data.msg, 600);
            });
        }

//图片更换的

        $('.s_banner').dblclick(function () {
            var scope = $(this);
            // $(this).find('input').trigger('click')
            if (scope.siblings('.status').attr('data-status') == '-2' || scope.siblings('.status').attr('data-status') == '0') {
                scope.find('input').trigger('click');
            }
        });
        $(':file').change(function () {
            var scope = $(this);
            var reader = new FileReader();
            var files = this.files[0];
            console.log(files);
            var fd = new FormData();
            fd.append('value', files);

            // console.log(this.files[0]);
            //图片修改异步请求
            $.ajax({
                url: '/themeAdmin/user/changeMassageImage?id=' + scope.parent().siblings('.id').text() + '&type=' + scope.parent().index(),
                type: "POST",
                data: fd,
                cache: false,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    toast_text(data.msg, 600);
                    reader.onload = function (e) {
                        var imgFile = e.target.result;
                        var image = new Image();
                        image.src = imgFile;
                        image.onload = function () {
                            scope.siblings('img').attr('src', imgFile);
                        };
                    };
                    reader.readAsDataURL(files);
                },
                error: function (e) {
                    toast_text('修改失败', 600);
                }
            });
//            $.post("/themeAdmin/user/changeMassageImage", {
//                value: fd,
//                id: scope.parent().siblings('.id').text(),
//                type: scope.parent().index()
//            }, function (data) {
//                toast_text(data.msg,600);
//            });
//            对上传图片size的大小做判断

        });

        $('.status').click(function () {
            var scope = $(this).attr('data-status');
            var id = $(this).siblings('.id').text();
            if (scope == '-1') {
                $.post("/themeAdmin/user/tipError", {id: id}, function (data) {
                    confirm(data.msg);
                });

            }
        });

    });
</script>
</body>
</html>